﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #myPara {
            height: 40px;
            width: 100px;
        }
        #paraMargin p {
            margin: 20px;
        }
        #paraMargin {
            border: 1px solid black;
            margin : 20px;
        }
    </style>
</head>
<body>
    <div id="boxModel">
        <h1>盒模式概述</h1>
        <p>构成:内容，内边距，边框， 外边距</p>
        <p id="myPara">width和height指的是内容的宽度和高度</p>
    </div>

    <div id="marginAdd">
        <h2>外边距叠加</h2>
        <p style="margin: 30px">外边距是30px,F12可以看到发生叠加后2个框的实际垂直外边距是30px</p>
        <p style="margin: 20px">外边距是20px</p>

        <div id="paraMargin">
            <p>段落1</p>
            <p>段落2</p>
            <p>外边距叠加保证了每个段落间的距离都是相同的，包括顶部边框的距离</p>
        </div>
    </div>
    <div id="Block">
        <h2>框的类型:块框和行框</h2>
        <p> p, div, h1 等都是块框</p>
        <span style=" display:block"> span ,strong等都是行框， 但是使用display可以改变框的类型 </span>
    </div>
</body>
</html>
